<template>
  <!-- 招商管理页面 -->
  <el-card>
    <div class="mt">
      <span class="title">文章类型: </span>
      <el-tag
        :type="currentIndex[0] === -1 ? 'primary' : 'info'"
        class="mr"
        @click="handleLegacySelectEvents(-1, 0)"
        >全部</el-tag
      >
      <!-- 循环项 -->
      <el-tag
        :type="currentIndex[0] === index ? 'primary' : 'info'"
        class="mr"
        v-for="(item, index) in typeList.type"
        :key="index"
        @click="handleLegacySelectEvents(index, 0, item)"
        >{{ item }}</el-tag
      >
    </div>

    <div class="mt">
      <span class="title">重要程度: </span>
      <el-tag
        :type="currentIndex[1] === -1 ? 'primary' : 'info'"
        class="mr"
        @click="handleLegacySelectEvents(-1, 1)"
        >全部</el-tag
      >
      <!-- 循环项 -->
      <el-tag
        :type="currentIndex[1] === index ? 'primary' : 'info'"
        class="mr"
        v-for="(item, index) in typeList.important"
        :key="item"
        @click="handleLegacySelectEvents(index, 1, item)"
        >{{ item }}</el-tag
      >
    </div>

    <div class="mt">
      <span class="title">发布渠道: </span>
      <el-tag
        :type="currentIndex[2] === -1 ? 'primary' : 'info'"
        class="mr"
        @click="handleLegacySelectEvents(-1, 2)"
        >全部</el-tag
      >
      <!-- 循环项 -->
      <el-tag
        :type="currentIndex[2] === index ? 'primary' : 'info'"
        class="mr"
        v-for="(item, index) in typeList.publish"
        :key="item"
        @click="handleLegacySelectEvents(index, 2, item)"
        >{{ item }}</el-tag
      >
    </div>

    <!-- 分割线 -->
    <el-divider></el-divider>

    <!-- 已选择 -->
    <div class="mt">
      <span class="title">已选择: </span>
      <el-tag
        disable-transitions
        type="success"
        closable
        class="mr"
        v-for="(item, index) in selectedList"
        :key="index"
        @close="handleCloseEvents(item.num)"
        >{{ item.name }}</el-tag
      >
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { categoryListApi } from "@/api/document";
import { onMounted, ref } from "vue";

interface TypeList {
  type: string[];
  important: string[];
  publish: string[];
}

const typeList = ref<TypeList>({
  type: [],
  important: [],
  publish: [],
});

// 获取文章分类列表接口
const getCategoryList = async () => {
  const { data } = await categoryListApi();
  typeList.value = data;
};

onMounted(() => {
  getCategoryList();
});

// 点击高亮功能逻辑 ================================================

// 定义当前高亮的序号
const currentIndex = ref([-1, -1, -1]);

// 点击事件
const handleLegacySelectEvents = (index: number, num: number, name?: string) => {
  /**
   * num: 0 文章类型
   * num: 1 重要程度
   * num: 2 发布渠道
   */

  //  判断,如果没有同类别的已选择项,则添加,如果有,则替换
  if (name) {
    const hasItem = selectedList.value.find((item: SelectType) => item.num === num);
    if (hasItem) {
      hasItem.name = name;
    } else {
      selectedList.value.push({ name, num });
    }
  } else {
    // 如果点击的是全部,则删除同类别的已选择项
    const index = selectedList.value.findIndex((item) => item.num === num);
    if (index !== -1) {
      selectedList.value.splice(index, 1);
    }
  }
  // 设置当前高亮的序号
  currentIndex.value[num] = index;
};

// 已选择功能逻辑 ============================================================
interface SelectType {
  name: string;
  num: number;
}

const selectedList = ref<SelectType[]>([]); // [{name: '全部', num:0}, {name: '政策法规', num:1}]

// 删除已选择项,并高亮回到全部
const handleCloseEvents = (num: number) => {
  const index = selectedList.value.findIndex((item) => item.num === num);
  if (index !== -1) {
    selectedList.value.splice(index, 1);
    // 高亮回到全部
    currentIndex.value[num] = -1;
  }
};
</script>

<style scoped lang="less">
.title {
  display: inline-block;
  width: 80px;
  font-size: 14px;
}
.el-tag {
  cursor: pointer;
}
</style>
